<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>publish</title>
    <link rel="stylesheet" href="../static/css/bootstrap.css" />
    <style>
      .wrapper {
        max-width: 800px;
        margin: 30px auto;
        display: flex;
        align-items: flex-start;
      }
      .avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        background: url(../static/images/lzlogo.png) no-repeat center / cover;
        margin-right: 20px;
        margin-left: 50px;
      }
      .wrapper textarea {
        outline: none;
        border-color: transparent;
        resize: none;
        background: #f5f5f5;
        border-radius: 4px;
        padding: 10px;
        transition: all 0.5s;
        flex: 1;
        height: 50px;
      }
      .wrapper textarea:focus {
        height: 80px;
        border-color: #e4e4e4;
        background: #fff;
      }
      .wrapper .btn {
        background: #00aeec;
        color: #fff;
        border: none;
        border-radius: 4px;
        margin-left: 10px;
        width: 70px;
        cursor: pointer;
      }
      .wrapper .total {
        color: #999;
        margin-top: 5px;
        opacity: 0;
        margin-right: 80px;
        transition: all 0.5s;
      }
      .list {
        max-width: 800px;
        margin: 20px auto;
        min-width: 400px;
      }
      .list .item {
        width: 100%;
        display: flex;
        margin-bottom: 15px;
        animation: fadeIn 0.3s ease-in-out;
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .wrapper textarea:focus {
        border-color: #00aeec;
        box-shadow: 0 0 0 2px rgba(0, 174, 236, 0.2);
      }
      .list .item .info {
        flex: 1;
        padding-bottom: 10px;
        border-bottom: 1px dashed #e4e4e4;
      }
      .list .item p {
        margin: 0;
      }
      .list .item .name {
        font-weight: bold;
        color: #fb7299;
        font-size: 14px;
      }
      .list .item .text {
        color: #333;
        padding: 10px 0;
      }
      .list .item .time {
        color: #999;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <i class="avatar"></i>
      <textarea
        name=""
        id="tx"
        placeholder="发布友善的评论"
        rows="2"
        maxlength="200"
      ></textarea>
      <button class="btn">发布</button>
    </div>
    <div class="wrapper">
      <span class="total">0/200字</span>
    </div>
    <div class="list">
      <!-- 评论将动态添加到这里 -->
    </div>
    <script>
      function getTime() {
        const date = new Date();
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        const time = `${year}-${month}-${day}`;
        return time;
      }
      // 获取元素
      const tx = document.querySelector("#tx");
      const total = document.querySelector(".total");
      const item = document.querySelector(".item");
      const btn = document.querySelector(".btn");
      const text = document.querySelector(".text");
      const timeElement = document.querySelector(".time");
      const time = getTime();
      // 获得焦点，显示字数

      tx.addEventListener("focus", function () {
        total.style.opacity = 1;
      });
      // 失去焦点，隐藏字数
      tx.addEventListener("blur", function () {
        total.style.opacity = 0;
      });
      // 计算字数
      tx.addEventListener("input", function () {
        const len = tx.value.length;
        total.innerHTML = `${len}/200字`;
        
        if (len > 200) {
          tx.value = tx.value.slice(0, 200);
          total.style.color = 'red';
          // 添加提示
          const over提示 = document.createElement('div');
          over提示.className = 'over提示';
          over提示.textContent = '评论内容不能超过200字';
          over提示.style.color = 'red';
          over提示.style.fontSize = '12px';
          over提示.style.marginTop = '5px';
          over提示.style.marginLeft = '78px';
          
          const existingOver提示 = document.querySelector('.over提示');
          if (!existingOver提示) {
            tx.parentNode.appendChild(over提示);
            setTimeout(() => {
              over提示.remove();
              total.style.color = ''; // 恢复颜色
            }, 2000);
          }
        } else {
          total.style.color = ''; // 恢复颜色
        }
      });
      // 按回车发布评论
      tx.addEventListener("keyup", function (e) {
        if (e.key === "Enter" && !e.shiftKey) { // 允许Shift+Enter换行
          e.preventDefault(); // 阻止默认换行行为
          const commentContent = tx.value.trim();
          if (commentContent) {
            const listContainer = document.querySelector('.list');
            const newComment = createCommentElement(commentContent, time);
            listContainer.prepend(newComment);
            
            tx.value = "";
            total.innerHTML = `0/200字`;
            total.style.opacity = 0;
          } else {
            // 显示内联错误提示
            const error提示 = document.createElement('div');
            error提示.className = 'error提示';
            error提示.textContent = '请输入评论内容';
            error提示.style.color = 'red';
            error提示.style.fontSize = '12px';
            error提示.style.marginTop = '5px';
            error提示.style.marginLeft = '78px';
            
            const existing提示 = document.querySelector('.error提示');
            if (!existing提示) {
              tx.parentNode.appendChild(error提示);
              setTimeout(() => {
                error提示.remove();
              }, 3000);
            }
          }
        }
      });
      // 创建评论元素函数
      function escapeHtml(unsafe) {
        return unsafe
          .replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&#039;");
      }

      function createCommentElement(content, time) {
        const newItem = document.createElement('div');
        newItem.className = 'item';
        const escapedContent = escapeHtml(content);
        newItem.innerHTML = `
          <i class="avatar"></i>
          <div class="info">
            <p class="name">foxhuty</p>
            <p class="text">${escapedContent}</p>
            <p class="time">${time}</p>
          </div>
        `;
        return newItem;
      }

      // 发布评论
      btn.addEventListener("click", function () {
        const commentContent = tx.value.trim();
        if (commentContent) {
          const listContainer = document.querySelector('.list');
          const newComment = createCommentElement(commentContent, time);
          listContainer.prepend(newComment);
          
          // 清空输入框
          tx.value = "";
          // 重置字数显示
          total.innerHTML = `0/200字`;
          // 隐藏字数显示
          total.style.opacity = 0;
        } else {
          // 显示内联错误提示
          const error提示 = document.createElement('div');
          error提示.className = 'error提示';
          error提示.textContent = '请输入评论内容';
          error提示.style.color = 'red';
          error提示.style.fontSize = '12px';
          error提示.style.marginTop = '5px';
          error提示.style.marginLeft = '78px';
          
          // 检查是否已有提示，避免重复添加
          const existing提示 = document.querySelector('.error提示');
          if (!existing提示) {
            tx.parentNode.appendChild(error提示);
            
            // 3秒后移除提示
            setTimeout(() => {
              error提示.remove();
            }, 3000);
          }
        }
      });
    </script>
  </body>
</html>